<template>
  <div>
  <el-row>
    <el-col :span="4"><div class="grid-content bg-purple"><el-avatar icon="el-icon-user-solid"></el-avatar></div></el-col>
    <el-col :span="20" style="text-align: left"><div class="grid-content bg-purple-light">{{question}}</div></el-col>
  </el-row>
  <el-row>
    <el-col :span="20" style="text-align: right"><div class="grid-content bg-purple-light">{{answer}}</div></el-col>
    <el-col :span="4"><div class="grid-content bg-purple"><el-avatar icon="el-icon-user-solid"></el-avatar></div></el-col>
  </el-row>
  </div>
</template>

<script>
export default {
  name: "QandA",
  props: {
    question: String,
    answer: String
  }
}
</script>

<style scoped>

</style>
